<template>
	<div id="app">
		<!--轮播图-->
		<div class="banner">
			<ul class="img">
				<li>
					<a href="javascript:void(0)"><img src="../../assets/img/1.jpg" alt="" /></a>
				</li>
				<li>
					<a href="javascript:void(0)"><img src="../../assets/img/2.jpg" alt="" /></a>
				</li>
				</li>
				<li>
					<a href="javascript:void(0)"><img src="../../assets/img/3.jpg" alt="" /></a>
				</li>
				</li>
			</ul>
			<ul class="num">

			</ul>
			<div class="btn btn_l">&lt;</div>
			<div class="btn btn_r">&gt;</div>
		</div>


		<!--网页内容-->
		<div class='container'>
			<div class="tab-head">
				<ul>
					<li class="selected">新媒体热门</li>
					<li>游戏设计热门</li>
					<li>动漫设计热门</li>
				</ul>
			</div>
			<div class="tab-content">
				<div class="showHot">
					<figure v-for="item in newmedia" @click='godetail(item._id)'>
						<strong class="title">{{item.title}}</strong>
						<span class="author">{{item.author}}</span>
						<img class='showImg' v-bind:src="getCoverUrl(item.coverImg_url)" alt="">
						<figcaption>
							<div class="info">
								<p class='sign'>
									<a href="javascript:" class="icon siIcon"></a><span>{{item.sign}}</span></p>
								<p class='like'>
									<a href="javascript:" class="icon liIcon"></a><span>{{item.likes.length}}</span></p>
								<p class='star'>
									<a href="javascript:" class="icon stIcon"></a><span>{{getstar(item.stars)}}</span></p>
							</div>
						</figcaption>
					</figure>
				</div>
				<div class="showHot">
					<figure v-for="item in game" @click='godetail(item._id)'>
						<strong class="title">{{item.title}}</strong>
						<span class="author">{{item.author}}</span>
						<img class='showImg' v-bind:src="getCoverUrl(item.coverImg_url)" alt="">
						<figcaption>
							<div class="info">
								<p class='sign'>
									<a href="javascript:" class="icon siIcon"></a><span>{{item.sign}}</span></p>
								<p class='like'>
									<a href="javascript:" class="icon liIcon"></a><span>{{item.likes.length}}</span></p>
								<p class='star'>
									<a href="javascript:" class="icon stIcon"></a><span>{{getstar(item.stars)}}</span></p>
							</div>
						</figcaption>
					</figure>
				</div>
				<div class="showHot">
					<figure v-for="item in cartoon" @click='godetail(item._id)'>
						<strong class="title">{{item.title}}</strong>
						<span class="author">{{item.author}}</span>
						<img class='showImg' v-bind:src="getCoverUrl(item.coverImg_url)" alt="">
						<figcaption>
							<div class="info">
								<p class='sign'>
									<a href="javascript:" class="icon siIcon"></a><span>{{item.sign}}</span></p>
								<p class='like'>
									<a href="javascript:" class="icon liIcon"></a><span>{{item.likes.length}}</span></p>
								<p class='star'>
									<a href="javascript:" class="icon stIcon"></a><span>{{getstar(item.stars)}}</span></p>
							</div>
						</figcaption>
					</figure>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import $ from "jquery";


	export default {
		name: 'home',
		created() {
			require('../../assets/js/index.js')($);
			this.$store.dispatch({
				type: "getAndDelMethod",
				method: "get",
				url: '/api/pro',
				params: {
					conditions: '{"column":1,"status":2}',
					limit: 10,
				},
				callback: (result) => {
					// console.log(result)
					this.newmedia = result.body.data;
					// console.log(this.newmedia)

				}
			})

			this.$store.dispatch({
				type: "getAndDelMethod",
				method: "get",
				url: '/api/pro',
				params: {
					conditions: '{"column":2,"status":2}',
					limit: 10,
				},
				callback: (result) => {
					// console.log(result)
					this.game = result.body.data;
					// console.log(this.game)

				}
			})
			this.$store.dispatch({
				type: "getAndDelMethod",
				method: "get",
				url: '/api/pro',
				params: {
					conditions: '{"column":3,"status":2}',
					limit: 10,
				},
				callback: (result) => {
					console.log(result)
					this.cartoon = result.body.data;
				}
			})
		},
		computed: {
			//  allstar() {
			//     let sum = 0;
			//     for (let i = 0; i < this.stars.length; i++) {
			//         sum = sum + this.stars[i].count;
			//     }
			//     return Math.ceil(sum / this.stars.length)
			// },

		},
		data() {
			return {
				newmedia: [],
				game: [],
				cartoon: [],
				coverUrl: [],
				likes: 0,
				sign: "",
			}
		},
		methods: {
			getCoverUrl(data) {
				return this.$store.state.ip + data;
			},
			godetail(_id) {
				this.$router.push({
					path: '/detail/',
					query: {
						_id: _id,
					}
				});
			},
			getstar(star) {
				let sum = 0;
				for (let i = 0; i < star.length; i++) {
					sum = sum + star[i].count;
				}
				return Math.ceil(sum / star.length)?Math.ceil(sum / star.length):0;
			}
		}
	}

</script>

<style>
	@import '../../assets/css/index.css';
</style>